<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
    <title>参与式感知</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
        #map{height:420px;width:40%;float:right;margin-right:60px;}
        #top{text-align:center;}
        #main{height:440px;width:50%;float:left;margin-left:60px;}
        #etitle{font-family:"微软雅黑";text-align:center;}
        #econtent{font-family:"微软雅黑";font-size:16px;}
        #etime{float:right;margin-right:20px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=74af171e2b27ee021ed33e549a9d3fb9"></script>
</head>
  
  <body>
      <div id="top">
	    <jsp:include page="head.jsp"></jsp:include>
	  </div>
	  <br>
      <div id="main">
        <div>
            <h3 id=etitle>${event.etitle} </h3>
 		</div>
 		<br>
 		<div id=econtent> 
 			<h4>任务内容：</h4><pre>${event.econtent}</pre>
 		</div>
 		<div>任务位置：<span id=locate></span>
 		</div>
 		<br>
        <br>
        <div id=eaqs> 
 			空气质量：${event.aqs}
 		</div>
        <div id=etime> 
 			任务更新时间：${event.uptime}
 		</div>
      <form>
      <input type="hidden" id="lat" name="lat" value="${event.lat}">
      <input type="hidden" id="lng" name="lng" value="${event.lng}">
      </form>
      <form id="addevent" action="${pageContext.request.contextPath}/event/apply.do" method="post">
       <span><font color="red">${status}</font></span>
          <br>
          <input type="hidden" name="eid" value="${event.eid}">
		  <input class="submit" type="submit" value="申 请 加 入">
	  </form>
	  <br>
	  <form id="invite" action="${pageContext.request.contextPath}/event/invite.do" method="post">
          <input type="hidden" name="eid" value="${event.eid}">
		  <input class="submit" type="submit" value="邀 请 用 户">
	  </form>
	  </div>
	  <div id="map"></div>
</body>
</html>

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("map");
	var lng = document.getElementById("lng").value;
	var lat = document.getElementById("lat").value;
	var point = new BMap.Point(lng,lat);
	var marker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker);              // 将标注添加到地图中
	map.centerAndZoom(point, 17);
	
    var gc = new BMap.Geocoder();   // 创建地址反解析器实例     
    gc.getLocation(point, function(rs){  
        var addComp = rs.addressComponents;
  	    var addr = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber; 
  	    document.getElementById("locate").innerHTML = addr;
      });   

	var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "任务地址",
	  enableMessage:true//设置允许信息窗发送短息
	} 
	var haha=document.getElementById("locate");
	var infoWindow = new BMap.InfoWindow(haha,opts);  // 创建信息窗口对象 
	
	marker.addEventListener("click", function(){  
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	});
</script>

